<div class="modal fade" data-backdrop="static" #modal>
  <div class="modal-dialog modal-change-match-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">×</span></button>
        <h4 class="modal-title">变更匹配</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <div class="box box-primary box-solid">
              <div class="box-header">
                <div class="box-title">
                  <h4>
                    上清/中债登数据
                  </h4>
                </div>
              </div>
              <div class="box-body no-padding">
                <table class="table table-bordered">
                  <thead>
                  <tr role="row">
                    <th rowspan="2">
                      <div class="cell">资产组合</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">场所</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">业务类型</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">首期/到期</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">交易对手</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">证券代码</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">证券简称</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">交易日期</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">结算日期</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">清算金额</div>
                    </th>
                    <th rowspan="1" colspan="2">
                      <div class="cell">指令状态</div>
                    </th>
                    <th rowspan="1" colspan="2">
                      <div class="cell">合同状态</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">成交编号</div>
                    </th>
                    <th rowspan="2">
                      <div class="cell">质押券比对</div>
                    </th>
                  </tr>
                  <tr>
                    <th rowspan="1">本方</th>
                    <th rowspan="1">对方</th>
                    <th rowspan="1">本方</th>
                    <th rowspan="1">对方</th>
                  </tr>
                  </thead>
                  <tbody>
                  <ng-container>
                    <tr>
                      <td data-field="ownHolderShortName">
                        <!-- 资产组合/本方持有人账号简称 -->
                        <div class="cell">{{otcBondTrade.ownHolderShortName}}</div>
                      </td>
                      <td data-field="tradingFloorShow">
                        <!--场所/交易场所-->
                        <div class="cell">{{otcBondTrade.tradingFloorShow}}</div>
                      </td>
                      <td data-field="tradeTypeShow">
                        <!--业务类型-->
                        <div class="cell">{{otcBondTrade.tradeTypeShow}}</div>
                      </td>
                      <td data-field="fullOrderType">
                        <!--首期/到期-->
                        <ng-container [ngSwitch]="otcBondTrade.fullOrderType">
                          <div *ngSwitchCase="null" class="cell">{{ '首期' }}</div>
                          <div *ngSwitchCase="0" class="cell">{{ '首期' }}</div>
                          <div *ngSwitchCase="1" class="cell">{{ '到期' }}</div>
                          <div *ngSwitchCase="2" class="cell">{{ '逾期返售' }}</div>
                          <div *ngSwitchCase="3" class="cell">{{ '现金交割' }}</div>
                        </ng-container>

                      </td>
                      <td data-field="oppoHolderShortName">
                        <!--交易对手-->
                        <div class="cell">{{otcBondTrade.oppoHolderShortName}}</div>
                      </td>
                      <td data-field="productCode">
                        <!--证券代码-->
                        <div class="cell">{{otcBondTrade.productCode}}</div>
                      </td>
                      <td data-field="productName">
                        <!--证券简称-->
                        <div class="cell">{{otcBondTrade.productName}}</div>
                      </td>
                      <td data-field="tradeDate">
                        <!--交易日期-->
                        <div class="cell">{{otcBondTrade.tradeDate}}</div>
                      </td>
                      <td data-field="settlementDate">
                        <!--结算日期-->
                        <div class="cell">{{otcBondTrade.settlementDate}}</div>
                      </td>
                      <td data-field="settlementAmount">
                        <!-- 清算金额 -->
                        <div class="cell">{{otcBondTrade.settlementAmount | numeral}}</div>
                      </td>
                      <td data-field="ownConfirmStatus">
                        <!--- 本方指令状态 -->
                        <div class="cell">{{otcBondTrade.ownConfirmStatusShow}}</div>
                      </td>
                      <td data-field="oppoConfirmStatus">
                        <!--- 对方指令状态 -->
                        <div class="cell">{{otcBondTrade.oppoConfirmStatusShow}}</div>
                      </td>
                      <td data-field="ownContractStatus">
                        <!--本方合同状态-->
                        <div class="cell">{{otcBondTrade.ownContractStatusShow}}</div>
                      </td>
                      <td data-field="oppoContractStatus">
                        <!--对方合同状态-->
                        <div class="cell">{{otcBondTrade.oppoContractStatusShow}}</div>
                      </td>
                      <td data-field="tradeId">
                        <!-- 成交编号 -->
                        <div class="cell">{{otcBondTrade.tradeId}}</div>
                      </td>
                      <td data-field="">
                        <!--质押券比对-->
                        <div class="cell">
                          <button type="button" class="btn btn-link"
                                  (click)="otcOpenPledgeListModal(otcBondTrade.tradeId)">
                            查看
                          </button>
                        </div>
                      </td>
                    </tr>
                  </ng-container>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="col-sm-12">
            <div class="box box-warning box-solid">
              <div class="box-header">
                <div class="box-title">
                  <h4>
                    O32指令列表
                    <small class="text-white">&nbsp;&nbsp;*筛选出相同组合和方向的数据</small>
                  </h4>
                </div>
                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <div class="box-body no-padding">
                <table class="table table-bordered">
                  <thead>
                  <tr>
                    <th></th>
                    <th>O32指令基金名称</th>
                    <th>O32指令委托方向</th>
                    <th>O32指令证券代码</th>
                    <th>O32指令证券名称</th>
                    <th>O32指令金额</th>
                    <th>质押券比对</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngFor="let item of trdBondTradeList;let index = index" [attr.data-index]="index"
                      class="dragula-row">
                    <td>
                      <input type="radio" name="o32DirectsSelect"
                             (click)="setSelectedTrdDateSerialNo($event,item.dateSerialNo)">
                    </td>
                    <td data-field="fundName">{{item.fundName}}</td>
                    <td data-field="tradeTypeShow">{{item.tradeTypeShow}}</td>
                    <td data-field="productCode">{{item.productCode}}</td>
                    <td data-field="productName">{{item.productName}}</td>
                    <td data-field="settleBalance">{{item.settleBalance | numeral}}</td>
                    <td>
                      <button type="button" class="btn btn-link"
                              (click)="o32OpenPledgeListModal(item.dateSerialNo)">
                        查看
                      </button>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="closeModal()">关闭</button>
        <button type="button" class="btn btn-primary" (click)="saveDirectiveMatch()"
                [disabled]="selectedTrdDateSerialNo == null || selectedTrdDateSerialNo.length <= 0"
                [attr.alt]="(selectedTrdDateSerialNo == null || selectedTrdDateSerialNo.length <= 0) ? '选择指令后才可以保存' :''"
                [attr.title]="(selectedTrdDateSerialNo == null || selectedTrdDateSerialNo.length <= 0) ? '选择指令后才可以保存' :''">
          保存
        </button>
      </div>
    </div>
  </div>
</div>

<!--质押券对比信息列表模态框Begin-->
<div class="modal fade" data-backdrop="static" #pledgeListModal>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="clasePledgeListModal()">
          <span aria-hidden="true" alt="关闭" title="关闭">×</span></button>
        <h4 class="modal-title">质押券信息</h4>
      </div>
      <div class="modal-body">
        <table class="table table-bordered table-striped">
          <tbody>
          <tr>
            <td>债券代码</td>
            <td>债券简称</td>
            <td>债券面额(万元)</td>
            <td>质押率(%)</td>
          </tr>
          <tr *ngFor="let item of pledgeListData">
            <td>{{item.productCode}}</td>
            <td>{{item.productName}}</td>
            <td>{{item.faceValue | numeral}}</td>
            <td>{{item.pledgeRate | numeral}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
                (click)="clasePledgeListModal()">
          关闭
        </button>
      </div>
    </div>
  </div>
</div>
<!--质押券对比信息列表模态框End-->
